import React,{useState} from 'react'
import "../../style/Tab/tab.scss"



function Tab() {
  type Tab = 'tab1' | 'tab2' | 'tab3';
   const [activeTab, setActiveTab] = useState<Tab>('tab1');

  const handleTabClick = (tab: Tab) => {
    setActiveTab(tab);
  };
  return (
    <div>
      <div className='text_page'>
        <h1>邀请函高端会议必备</h1>
        <ul>
          <li  className={activeTab === 'tab1' ? 'active' : ''}
          onClick={() => handleTabClick('tab1')}>商务会议</li>
          <li className={activeTab === 'tab2' ? 'active' : ''}
          onClick={() => handleTabClick('tab2')}>新品发布</li>
          <li>开业邀请</li>
          <li>招商引资</li>
          <li>婚礼邀请</li>
          <li>更多分类</li>
        </ul>
      </div>

      {activeTab === 'tab1' && 
      <div className='body_page'>
         <div className='body_tab'>
        <div className="image_page">
          <img src="/src/img/meng.png" alt="" />
        </div>
        <div className="image_page">
          <img src="/src/img/meng.png" alt="" />
        </div>
        <div className="image_page">
          <img src="/src/img/meng.png" alt="" />
        </div>
        <div className="image_page">
          <img src="/src/img/meng.png" alt="" />
        </div>
        <div className="image_page">
          <img src="/src/img/meng.png" alt="" />
        </div>
        <div className="image_page">
          <img src="/src/img/meng.png" alt="" />
        </div>
        <div className="image_page">
          <img src="/src/img/meng.png" alt="" />
        </div>
        <div className="image_page">
          <img src="/src/img/meng.png" alt="" />
        </div>
    </div>
      </div>
     
      }
      {activeTab === 'tab2' && <div className='tab2_page'>
         <div className="image_page">
          <img src="/src/img/zi.jpg" alt="" />
        </div>
         <div className="image_page">
          <img src="/src/img/zi.jpg" alt="" />
        </div>
         <div className="image_page">
          <img src="/src/img/zi.jpg" alt="" />
        </div>
         <div className="image_page">
          <img src="/src/img/zi.jpg" alt="" />
        </div>
         <div className="image_page">
          <img src="/src/img/zi.jpg" alt="" />
        </div>
         <div className="image_page">
          <img src="/src/img/zi.jpg" alt="" />
        </div>
         <div className="image_page">
          <img src="/src/img/zi.jpg" alt="" />
        </div>
         <div className="image_page">
          <img src="/src/img/zi.jpg" alt="" />
        </div>
        </div>}
    
    </div>
  )
}

export default Tab